<template>
  <div class="new-retrieve-box">
    <div class="main-box">
      <div class="center-form">
        <el-form
          ref="retrieveFromData"
          class="retrieve-form"
          :rules="retrieveFormRules"
          :model="retrieveFromData"
          label-width="80px"
        >
          <el-form-item label="手机号：" prop="phone">
            <el-input
              class="phone-input"
              maxlength='11'
              type='tel'
              placeholder="请输入手机号码"
              v-model="retrieveFromData.phone"
            />
          </el-form-item>
          <el-form-item label="验证码：" prop="verificationCode">
            <div class="capcha-corver">
              <el-input
                v-model.trim="retrieveFromData.verificationCode"
                placeholder="请输入手机验证码"
                maxlength="6"
                class="capcha-input"
              >
                <el-button
                 v-if="codeShow"
                  class="capcha-button"
                  type="primary"
                  slot="suffix"
                  :disabled="sendCodeDiabled"
                  @click="sendCode"
                  :loading="codeLoading"
                  >{{ sendCodeTitle }}</el-button>
                  <el-button
                  v-if="timoutShow"
                  class="capcha-button"
                  type="primary"
                  slot="suffix"
                  :disabled="sendCodeDiabled"
                  >{{ sendCodeTitle }}</el-button>
                >
              </el-input>
            </div>
          </el-form-item>
          <el-form-item label="新密码：" prop="password">
            <el-input
              show-password
              v-model.trim="retrieveFromData.password"
              placeholder="请设置6-16位字母、数字"
              clearable
              maxlength="20"
              class="password-input"
            />
          </el-form-item>
          <el-form-item>
            <div class="button-corver">
              <el-button class="submit" @click="submit">提交</el-button>
              <el-button class="goback" @click="cancel">取消</el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import cookie from 'js-cookie'
import md5 from 'js-md5'
import {phone} from '@const/formValidate.js'
import {
  sendVerificationCode,
  loginUpdatePasswordByPhone
} from '@const/api_staffCenter.js';
import { setTimeout } from 'timers';

export default {
  layout: 'login',
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (!/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/.test(value)) {
          callback(new Error('请设置6-16位字母、数字'))
          return false
        }
        callback()
      }
    }
    return {
      retrieveFromData: {
        phone: '',
        verificationCode: ' ',
        password: ''
      },
      retrieveFormRules: {
        phone: phone(),
        verificationCode: [
          {required: true, message: '请输入验证码', trigger: 'blur'},
          {
            pattern: /^[0-9]{6}$/,
            message: '请输入6位数字验证码',
            trigger: 'blur'
          }
        ],
        password: [{required: true, validator: validatePass, trigger: 'blur'}]
      },
      sendCodeDiabled: false,
      codeLoading: false,
      sendCodeTitle: '获取验证码',
      timout: '',
      codeShow: true,
      timoutShow: false,
      time: 60,
      sendVerificationCodeFlag: false
    }
  },
  methods: {
    submit() {
      if (!this.sendVerificationCodeFlag){
        this.$message({type: 'success', message: '请获取验证码'})
        return false
      }
      this.$refs['retrieveFromData'].validate(valid => {
        let parms = JSON.parse(JSON.stringify(this.retrieveFromData))
        parms.source = 'm_pc_web'
        parms.newPassword =  md5(parms.password)
        delete parms.password
        if (valid) { 
          this.$axios({
            url: loginUpdatePasswordByPhone,
            method: 'post',
            data: parms
          })
            .then(res => {
              if (res.data.code === '0') {
                this.$message({type: 'success', message: '密码修改成功！'})
                let path = this.$router.options.base
                cookie.remove('token', { path })
                // =======密码修改成功跳转至登录页面======
                window.location.href = '/#/login'
              }
            })
            .catch(err => {
              // reject(err);
            });
        }
      })
    },
    cancel() {
      this.$router.push({
        path: this.$PATH_CONST.login_page
      })
    },
    sendCode() {
      this.$refs.retrieveFromData.validateField('phone',(msg) => {
        console.log(msg)
        if(!msg) {
          this.sendVerificationCodeFlag = true
          this.$axios({
            url: sendVerificationCode,
            method: 'post',
            data: {
              phone: this.retrieveFromData.phone,
              source: 'm_pc_web'
            }
          })
          .then(res => {
            if (res.data.code === '0') {
              this.codeShow = false
              this.timoutShow = true
              this.timout = setInterval(()=>{
                let time = this.time;
                time = time - 1
                this.time = time
                this.sendCodeTitle = `${this.time}秒后重发`
                if (this.time === 0) {
                  clearTimeout(this.timout)
                  this.time = false
                  this.codeShow = true
                  this.time = 60
                  this.timoutShow = false
                  this.sendCodeTitle = '重新获取'
                }
              },1000)
              this.$message({type: 'success', message: '验证码发送成功！'})
            }
          })
          .catch(err => {
            // reject(err);
          });
        }
      })
    }
  },
  mounted() {
    // 
  },
  created() {
    this.$store.commit('setLoginTitle', '忘记密码')
  }
}
</script>
<style lang="less">
.new-retrieve-box {
  font-family: PingFangSC-Regular;
  background:
    #f4f6fb
    url('../../../m-front-common/pc/assets/img/home/registerbg1.png') no-repeat
    100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  .main-box {
    min-width: 460px;
    min-height: 320px;
    width: 822px;
    height: 505px;
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
    .center-form {
      .retrieve-immediate {
        font-size: 16px;
        color: #fff;
        letter-spacing: 0;
        width: 330px;
        height: 40px;
        background: #4d84ff;
        border-radius: 4px;
        border-radius: 4px;
      }
      .capcha-button {
        width: 120px;
        height: 38px;
        background: #f4f4f4;
        border-left: 1px solid #ccc;
        border-radius: 0 2px 2px 0;
        border-top: none;
        border-right: none;
        border-bottom: none;
        font-size: 14px;
        color: #666;
        letter-spacing: 0;
        margin-right: -4px;
        font-weight: 100;
        font-family: PingFangSC-Regular;
      }
      .button-corver {
        width: 330px;
        display: flex;
        justify-content: space-around;
        .goback {
          width: 114px;
          height: 42px;
          background: #f4f4f4;
          border: 1px solid #ccc;
          border-radius: 4px;
          border-radius: 4px;
          font-size: 16px;
          color: #666;
          letter-spacing: 0;
          font-weight: 100;
          font-family: PingFangSC-Regular;
        }
        .submit {
          width: 114px;
          height: 42px;
          background: #4d84ff;
          border-radius: 4px;
          font-size: 16px;
          color: #fff;
          letter-spacing: 0;
          font-weight: 100;
          font-family: PingFangSC-Regular;
        }
      }
    }
  }
  // element表单重置
  .el-input__inner {
    width: 330px;
    height: 40px;
    border-radius: 2px;
    border: 1px solid #ccc;
  }
  .el-checkbox__label {
    font-size: 12px;
  }
}
</style>
